<template>
  <el-dialog
    :title="!dataForm.pkId ? '新增' : '查看'"
    :close-on-click-modal="false"
    fullscreen
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px" :disabled="true">
      <el-card style="width: 100%;" shadow="hover">
        <div slot="header" class="clearfix">
          <span>办件基本信息</span>
        </div>
        <div>
         <el-row :gutter="20">
            <el-col :span="8">
               <el-form-item label="办件所属事项" prop="catalogcode" label-width="140px">
                  <el-input v-model="resultCataLogCode"  :style="{ width: '80%' }"></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="办件事项编号" prop="projectno" label-width="140px">
                  <el-input v-model="dataForm.projectno"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                 <el-form-item label="业务办理方式" prop="projecttype" label-width="140px">
                  <el-input v-model="resultProType"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
         </el-row>  
        </div> 
      </el-card>
      <el-card style="width: 100%;margin-top:10px;" shadow="hover">
        <div slot="header" class="clearfix">
          <span>申请人基本信息</span>
        </div>
        <div>
         <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="申请人/单位类型" prop="applyerType" label-width="140px">
                  <el-input v-model="resultApplyerType"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="法定代表人" prop="legal" label-width="140px">
                  <el-input v-model="dataForm.legal"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
         </el-row>  
         <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="申请名称" prop="applyerName" label-width="140px">
                  <el-input v-model="dataForm.applyerName"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="申请人证件类型" prop="applyerCardtype" label-width="140px">
                  <el-input v-model="this.resultApplyerCaType"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
         </el-row> 
         <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="申请人证件号码" prop="applyerCardcode" label-width="140px">
                  <el-input v-model="dataForm.applyerCardcode"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="申请人手机号" prop="applyerPhone" label-width="140px">
                  <el-input v-model="dataForm.applyerPhone"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
         </el-row> 
         <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="申请人籍贯" prop="applyerNative" label-width="140px">
                  <el-input v-model="dataForm.applyerNative"  :style="{ width: '80%' }"></el-input>
                </el-form-item>
            </el-col>
            
         </el-row>
        </div> 
      </el-card>  
      <el-card style="width: 100%;margin-top:10px;" shadow="hover">
          <div slot="header" class="clearfix">
            <span>办件审批信息</span>
          </div>
          <div>
            <el-table
            :data="dataList"
            border
            style="width: 100%;">
            <el-table-column
              prop="processName"
              header-align="center"
              align="center"
              width="200"
              :formatter="groupFormate"
              label="办理环节名称">
            </el-table-column>
            <el-table-column
              prop="eventendtime"
              header-align="center"
              align="center"
              label="环节结束时间">
            </el-table-column>
            <el-table-column
              prop="handleexplain"
              header-align="center"
              align="center"
              width="600"
              label="办理意见">
            </el-table-column>
            <el-table-column
              prop="handleusername"
              header-align="center"
              align="center"
              width="200"
              label="办理人姓名">
            </el-table-column>
          </el-table>
          </div>
      </el-card>  

    </el-form>
    
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataList: [],
        dataForm: {
          pkId: 0,
          catalogcode: '',
          projectno: '',
          applyerType: '',
          legal: '',
          applyerName: '',
          applyerCardtype: '',
          applyerCardcode: '',
          applyerPhone: '',
          applyerNative: '',
          projecttype: '',
          delState: '',
          changeFlag: '',
          synTime: '',
          cdUptime: '',
          rowguid:'',
          processName:'',
          processOrgname:'',
          administrativepDiv:'',
          handleuserId:'',
          handleusername:'',
          handleexplain:'',
          eventendtime:''

          
        },
        zjlxOption:[],
        fwdxOption:[],
        yysxlxOption:[],
        sfOption:[],
        qhmcOption:[],
        blfsOption:[],
        bjhjOption:[],
        dataRule: {
          
        }
       
      }
    },
    created(){
     
			this.dataSex('ZJLX')
      this.dataSex('FWDX')
      this.dataSex('YYSXLB')
      this.dataSex('SF')
     this.dataSex('BJHJ')
     this.dataSex('BLFS')
    },
    computed: {
         resultApplyerCaType(){
           let applyerCardtype = '';
            this.zjlxOption.forEach(item => {
              if (this.dataForm.applyerCardtype == item.code) {
                applyerCardtype = item.value;
              }
            });
				    return applyerCardtype;
         },
         resultApplyerType(){
           let applyerType = '';
            this.fwdxOption.forEach(item => {
              if (this.dataForm.applyerType == item.code) {
                applyerType = item.value;
              }
            });
            return applyerType;
         },
         resultCataLogCode(){
           let catalogcode = '';
            this.yysxlxOption.forEach(item => {
              if (this.dataForm.catalogcode == item.code) {
                catalogcode = item.value;
              }
            });
            return catalogcode;
         },
         resultProType(){
           let projecttype = '';
            this.blfsOption.forEach(item => {
              if (this.dataForm.projecttype == item.code) {
                projecttype = item.value;
              }
            });
            return projecttype;

         }
    },
  
    methods: {
      init (id) {
        this.dataForm.pkId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.pkId) {
            this.$http({
              url: this.$http.adornUrl(`/wsbj/upprobasic/info/${this.dataForm.pkId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.catalogcode = data.upProBasic.catalogcode
                this.dataForm.projectno = data.upProBasic.projectno
                this.dataForm.applyerType = data.upProBasic.applyerType
                this.dataForm.legal = data.upProBasic.legal
                this.dataForm.applyerName = data.upProBasic.applyerName
                this.dataForm.applyerCardtype = data.upProBasic.applyerCardtype
                this.dataForm.applyerCardcode = data.upProBasic.applyerCardcode
                this.dataForm.applyerPhone = data.upProBasic.applyerPhone
                this.dataForm.applyerNative = data.upProBasic.applyerNative
                this.dataForm.projecttype = data.upProBasic.projecttype
                this.dataForm.delState = data.upProBasic.delState
                this.dataForm.changeFlag = data.upProBasic.changeFlag
                this.dataForm.synTime = data.upProBasic.synTime
                this.dataForm.cdUptime = data.upProBasic.cdUptime

                   this.$http({
                      url: this.$http.adornUrl(`/wsbj/upprobasic/infoChild/${this.dataForm.catalogcode}/${this.dataForm.projectno}`),
                      method: 'get',
                      params: this.$http.adornParams()
                      }).then(({data}) => { 
                         this.dataList = data.list
                      })
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/wsbj/upprobasic/${!this.dataForm.pkId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'pkId': this.dataForm.pkId || undefined,
                'catalogcode': this.dataForm.catalogcode,
                'projectno': this.dataForm.projectno,
                'applyerType': this.dataForm.applyerType,
                'legal': this.dataForm.legal,
                'applyerName': this.dataForm.applyerName,
                'applyerCardtype': this.dataForm.applyerCardtype,
                'applyerCardcode': this.dataForm.applyerCardcode,
                'applyerPhone': this.dataForm.applyerPhone,
                'applyerNative': this.dataForm.applyerNative,
                'projecttype': this.dataForm.projecttype,
                'delState': this.dataForm.delState,
                'changeFlag': this.dataForm.changeFlag,
                'synTime': this.dataForm.synTime,
                'cdUptime': this.dataForm.cdUptime
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
       dataSex(type){
         this.$http({
            url: this.$http.adornUrl("/sys/dict/select/"+type),
            method: "get",
            params: this.$http.adornParams(),
            })
            .then(({ data }) => {
              if(type == 'ZJLX'){
                this.zjlxOption = data && data.code === 0 ? data.list : [];
                
              }       
              if(type == 'FWDX'){
                this.fwdxOption = data && data.code === 0 ? data.list : [];
                
              }
              if(type == 'YYSXLB'){
                this.yysxlxOption = data && data.code === 0 ? data.list : [];
                
              }  
              if(type == 'SF'){
                this.sfOption = data && data.code === 0 ? data.list : [];
              } 
              if(type == 'QHMC'){
                this.qhmcOption = data && data.code === 0 ? data.list : [];
              }
              if(type == 'BLFS'){
                this.blfsOption = data && data.code === 0 ? data.list : [];
                
              } 
              if(type == 'BJHJ'){
                this.bjhjOption = data && data.code === 0 ? data.list : [];
              }  
            })
      },
      groupFormate(row) {
				let processName = '';
				this.bjhjOption.forEach(item => {
					if (row.processName == item.code) {
						processName = item.value;
					}
				});
				return processName;

      },
    }
  }
</script>
<style>
.el-input.is-disabled .el-input__inner {
background-color: #f5f7fa;
border-color: #e4e7ed;
color: #000;
cursor:pointer
}
body .el-table th.gutter{

display: table-cell!important;

}
</style>
